<script lang="ts" setup>
import { chunkArray } from "@/utils";

const props = defineProps({
  resItem: {
    type: Object,
    default: () => ({})
  }
});
defineOptions({
  name: "MoreNums"
});

const { resItem } = toRefs(props);
const winList = computed(() => [
  {
    level: "2nd Prize",
    price: `Reward ${unref(resItem)?.list?.second?.[0]?.price} บาท`,
    numbers: chunkArray(
      unref(resItem)
        ?.list?.second?.map((it: { draw_number: any }) => it.draw_number)
        .filter(Boolean) ?? [],
      5
    )
  },
  {
    level: "3rd Prize",
    price: `Reward ${unref(resItem)?.list?.third?.[0]?.price} บาท`,
    numbers: chunkArray(
      unref(resItem)
        ?.list?.third?.map((it: { draw_number: any }) => it.draw_number)
        .filter(Boolean) ?? [],
      5
    )
  },
  {
    level: "4th Prize",
    price: `Reward ${unref(resItem)?.list?.fourth?.[0]?.price} บาท`,
    numbers: chunkArray(
      unref(resItem)
        ?.list?.fourth?.map((it: { draw_number: any }) => it.draw_number)
        .filter(Boolean) ?? [],
      5
    )
  },
  {
    level: "5th Prize",
    price: `Reward ${unref(resItem)?.list?.fifth?.[0]?.price} บาท`,
    numbers: chunkArray(
      unref(resItem)
        ?.list?.fifth?.map((it: { draw_number: any }) => it.draw_number)
        .filter(Boolean) ?? [],
      5
    )
  }
]);
</script>
<template>
  <div>
    <div
      class="w-330 mx-auto mb-19"
      v-for="(it1, idx1) in winList"
      :key="idx1"
      :class="{
        'mb-[16px_!important]': idx1 === winList.length - 1
      }"
    >
      <div
        class="bg-[#ffffff] shadow-[0px_0px_4px_0px_rgba(120,172,206,0.22)] rounded-10 b-1 b-solid b-#E2F1FF px-10 py-16"
      >
        <div class="h-33 mb-10">
          <p class="font-bold text-14 lh-17 text-left">{{ it1.level }}</p>
          <p class="font-normal text-14 color-[#0094CF] lh-17 text-left">
            {{ it1.price }}
          </p>
        </div>
        <div>
          <div
            class="h-36 bg-[#E2F1FF] rounded-4 px-11 py-12 flex justify-between items-center mb-10"
            v-for="(it2, idx2) in it1.numbers"
            :key="idx2"
            :class="{
              'bg-[#FFFFFF_!important]': idx2 % 2 != 0,
              'mb-[0px_!important]': idx2 === it1.numbers.length - 1
            }"
          >
            <span
              class="fon-bold text-13 color-[#303030] lh-15 text-center not-italic"
              >{{ it2[0] }}</span
            >
            <span>
              <van-divider
                v-if="it2[0] && it2[1]"
                vertical
                :style="{
                  borderColor: '#C5C5C5',
                  height: '12px',
                  '--van-divider-vertical-margin': '0'
                }"
              />
            </span>
            <span
              class="fon-bold text-13 color-[#303030] lh-15 text-center not-italic"
              >{{ it2[1] }}</span
            >
            <span>
              <van-divider
                v-if="it2[1] && it2[2]"
                vertical
                :style="{
                  borderColor: '#C5C5C5',
                  height: '12px',
                  '--van-divider-vertical-margin': '0'
                }"
              />
            </span>
            <span
              class="fon-bold text-13 color-[#303030] lh-15 text-center not-italic"
              >{{ it2[2] }}</span
            >
            <span>
              <van-divider
                v-if="it2[2] && it2[3]"
                vertical
                :style="{
                  borderColor: '#C5C5C5',
                  height: '12px',
                  '--van-divider-vertical-margin': '0'
                }"
              />
            </span>
            <span
              class="fon-bold text-13 color-[#303030] lh-15 text-center not-italic"
              >{{ it2[3] }}</span
            >
            <span>
              <van-divider
                v-if="it2[3] && it2[4]"
                vertical
                :style="{
                  borderColor: '#C5C5C5',
                  height: '12px',
                  '--van-divider-vertical-margin': '0'
                }"
              />
            </span>
            <span
              class="fon-bold text-13 color-[#303030] lh-15 text-center not-italic"
              >{{ it2[4] }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
